<script>
// 引入依赖
import { userLoginService, userRegisterService } from '@/api/user/UserService.js';
import LoadingVue from '@/views/Components/Others/loading.vue';
import router from 'vue-router';

export default {
    components: {
        LoadingVue,
    },
    computed: {
    },
	data() {
		return {
			re_username: '', // 注册用户名
			re_password: '', // 注册密码
			username: '', //登录用户名
			password: '', //登录密码
            avatar: '', // 用户头像设置
            gender: '' , // 用户性别
            birth: "", // 用户生日
            phone: "",
			container: "container",
			temp1: "container",
			temp2: "container sign-up-mode",
			imageUrl: '',
			radio1: '1',
			value1: '',
            loading: false,
            flag: false
		};
	},
	methods: {
        // 头像上传成功后
        handleAvatarSuccess(res, file) {
            this.avatar = res.data;
        },
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},

		clearLoginData() {
			this.username = '';
			this.password = '';
			this.container = this.temp1;
		},
		clearRegisterData() {
			this.re_username = '';
			this.re_password = '';
			this.avatar = '';
            this.gender = '1';
            this.birth = '';
            this.phone = '';
			this.container = this.temp2;
		},
		async login(options) {
            
            const params = {
                username: this.username,
                password: this.password,
            };
            this.flag = true;
            let result = await userLoginService(params);
            if(result.code === 500) {
                this.flag = false;
                this.$message({
                    message: result.message,
                    type: 'error'
                })
            } else {
                //this.loading = true;
                await this.$store.dispatch("login", params)
                    .then(() => {
                        this.$store.dispatch("getInfo").then(() => {
                            this.$router.push({
                                path: this.redirect || "/",
                            });
                        });
                        this.flag = false;
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        //this.loading = false;
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            }
		},
        // 封装时间返回对象
        getFormatDate(time) {
            const date = new Date(time);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        async register() {
            if(this.re_username.length <= 2) {
                this.$message({
                    message: '用户名长度不能小于2',
                    type: 'error'
                })
                return;
            }
            const regex = /^[A-Za-z0-9]{6,18}$/;
            if(!regex.test(this.re_password)) {
                this.$message({
                    message: '密码长度不能小于6且必须由数字和字母组成',
                    type: 'error'
                })
                return;
            }
            if(this.avatar == null) {
                this.$message({
                    message: '请上传头像',
                    type: 'error'
                })
                return;
            }
            const regex1 = /^1[3-9]\d{9}$/;
            if(!regex1.test(this.phone)) {
                this.$message({
                    message: '手机号格式不正确',
                    type: 'error'
                })
                return;
            }
            const params = {
                username: this.re_username,
                password: this.re_password,
                avatar: this.avatar,
                gender: this.gender,
                birthday: this.getFormatDate(this.birth),
                phone: this.phone,
            }
            console.log(params);
            let result = await userRegisterService(params);
            console.log(result);
            if(result.code === 200) {
                this.$message({
                    message: result.message,
                    type: 'success'
                })
                this.username = this.re_username;
                this.password = this.re_password;
                this.container = this.temp1;
            } else {
                this.$message({
                    message: result.message,
                    type: 'error'
                })
            }
        }
	},
};

</script>


<template>
	<div :class="container" v-loading="loading">
        <LoadingVue v-if="flag"  />
		<div class="forms-container">
			<div class="signin-signup">
				<!-- 登录内容 -->
				<div class="sign-in-form FORM">
					<h2 class="title">登录</h2>
					<div class="input-field">
						<div class="iconFace">
							<img width="18" height="18" src="../../assets/img/user.svg" alt="">
						</div>
						<input v-model="username" type="text" placeholder="用户名" />
					</div>
					<div class="input-field">
						<div class="iconFace">
							<img width="18" height="18" src="../../assets/img/lock.svg" alt="">
						</div>
						<input v-model="password" type="password"  placeholder="密码" />
					</div>
					<input @click="login" type="submit" value="立即登录" class="btn solid" />
					<p class="social-text">通过其他方式</p>
					<div class="social-media">
						<a href="#" class="social-icon">
							<div class="iconFace">
								<!-- qq -->
								<svg t="1716042528254" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="5684" width="20" height="20">
									<path
										d="M794.5 721.9c-9.7 56.1-35.7 106.6-73.3 146.4 40.8 18.9 77.6 47.7 77.6 90.3H225c0-42.6 36.9-71.3 77.6-90.3-37.6-39.8-63.7-90.3-73.3-146.4-43.1 63.2-106.8 94.5-106.8 94.5 0-164 102.5-386 102.5-386v-81.2c0-157.1 128.5-284.4 286.9-284.4 158.5 0 286.9 127.3 286.9 284.4v81.2s102.4 222 102.4 386c0.1 0-63.7-31.3-106.7-94.5z m0 0"
										p-id="5685" fill="#333333"></path>
								</svg>
							</div>
						</a>
						<a href="#" class="social-icon">
							<div class="iconFace">
								<!-- 微信 -->
								<svg t="1716042586508" class="icon" viewBox="0 0 1251 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6756" width="20" height="20">
									<path
										d="M874.116741 320.739556c8.229926 0 16.459852 0.303407 24.576 0.720592C864.635259 139.264 677.660444 0 452.077037 0 202.448593 0 0 170.704593 0 381.345185c0 114.763852 60.871111 218.263704 156.254815 288.161185a30.568296 30.568296 0 0 1 12.667259 24.917334c0 3.413333-0.682667 6.523259-1.517037 9.784889-7.698963 28.709926-19.835259 74.714074-20.404148 76.837926-0.948148 3.678815-2.351407 7.35763-2.351408 11.188148 0 8.343704 6.674963 15.284148 15.056593 15.284148a17.483852 17.483852 0 0 0 8.685037-2.844445l98.986667-57.874963a46.648889 46.648889 0 0 1 24.007111-7.092148c4.437333 0 8.912593 0.720593 13.274074 2.010074a529.294222 529.294222 0 0 0 172.411259 20.366223 294.305185 294.305185 0 0 1-15.246222-93.411556c0-192.246519 184.585481-347.932444 412.254815-347.932444zM602.832593 198.352593c33.261037 0 60.302222 27.306667 60.302222 60.984888 0 33.716148-26.927407 61.022815-60.302222 61.022815-33.223111 0-60.302222-27.306667-60.302223-61.022815 0-33.678222 27.079111-60.984889 60.302223-60.984888zM301.435259 320.32237c-33.223111 0-60.302222-27.306667-60.302222-61.022814 0-33.678222 26.927407-60.984889 60.302222-60.984889 33.374815 0 60.302222 27.306667 60.302222 60.984889 0 33.716148-27.079111 61.022815-60.302222 61.022814z"
										p-id="6757" fill="#333333"></path>
									<path
										d="M1121.46963 909.198222C1200.848593 850.906074 1251.555556 764.814222 1251.555556 669.013333c0-175.521185-168.656593-317.781333-376.832-317.781333-208.023704 0-376.794074 142.222222-376.794075 317.781333 0 175.521185 168.656593 317.743407 376.794075 317.743408 43.008 0 84.612741-6.219852 123.031703-17.408a36.560593 36.560593 0 0 1 10.998519-1.668741c7.281778 0 13.842963 2.275556 19.986963 5.802667l82.488889 48.128a13.918815 13.918815 0 0 0 7.281777 2.389333 12.47763 12.47763 0 0 0 12.553482-12.743111c0-3.109926-1.251556-6.219852-1.934222-9.329778-0.417185-1.706667-10.619259-40.049778-17.066667-64.094815a32.161185 32.161185 0 0 1-1.251556-8.116148 26.244741 26.244741 0 0 1 10.61926-20.48z m-372.09126-290.891852c-27.799704 0-50.289778-22.755556-50.289777-50.82074 0-27.989333 22.490074-50.820741 50.289777-50.820741 27.761778 0 50.251852 22.831407 50.251852 50.820741 0 28.065185-22.603852 50.820741-50.251852 50.82074z m251.145482 0c-27.761778 0-50.251852-22.755556-50.251852-50.82074 0-27.989333 22.490074-50.820741 50.251852-50.820741 27.799704 0 50.251852 22.831407 50.251852 50.820741a50.744889 50.744889 0 0 1-50.251852 50.82074z"
										p-id="6758" fill="#333333"></path>
								</svg>
							</div>
						</a>
						<a href="#" class="social-icon">
							<div class="iconFace">
								<!-- 微博 -->
								<svg t="1716042678693" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="8940" width="20" height="20">
									<path
										d="M845.248 466.048c-1.344 0-2.688-0.064-4.032-0.448-9.536-2.112-15.616-11.648-13.504-21.312 11.2-49.728 6.592-84.992-13.568-104.768-33.344-32.768-100.928-16.96-101.568-16.768-9.664 2.368-19.328-3.584-21.568-13.12-2.304-9.6 3.456-19.2 13.12-21.568 3.584-0.896 87.424-20.736 134.912 25.856 29.568 29.056 37.504 75.456 23.424 138.112C860.736 460.416 853.376 466.048 845.248 466.048z"
										fill="#333333" p-id="8941"></path>
									<path
										d="M961.536 514.88c-1.344 0-2.56-0.128-3.968-0.32-12.928-2.176-21.696-14.464-19.584-27.328 20.032-121.088 3.84-205.888-48.192-252.224-80.256-71.296-223.616-30.784-225.088-30.4-12.544 3.648-25.728-3.648-29.44-16.192C631.68 175.872 638.912 162.688 651.584 158.912c6.784-2.048 169.6-48.32 269.76 40.384 65.216 57.856 86.656 157.312 63.68 295.616C983.04 506.624 972.992 514.88 961.536 514.88z"
										fill="#333333" p-id="8942"></path>
									<path
										d="M744.512 514.88c0 0 98.688-234.816-230.4-117.824 10.432-123.392-43.136-198.272-203.776-107.072 0 0-521.92 353.856-141.248 579.904 0 0 478.72 197.76 695.936-169.536C908.096 568.064 780.224 512.896 744.512 514.88zM435.648 869.44c-158.336 18.112-296.512-52.288-308.544-157.44S233.6 506.944 391.936 488.832c158.4-18.24 296.576 52.224 308.608 157.312C712.64 751.232 593.984 851.264 435.648 869.44z"
										fill="#333333" p-id="8943"></path>
									<path
										d="M550.144 680.384C543.616 608.448 469.12 556.352 383.808 564.096c-85.312 7.744-149.184 72.256-142.656 144.256 6.528 72 80.96 124.096 166.272 116.288C492.8 816.96 556.608 752.32 550.144 680.384zM347.776 771.712c-26.368 0-47.808-19.968-47.808-44.544 0-24.576 21.44-44.608 47.808-44.608 26.496 0 47.872 20.032 47.872 44.608C395.648 751.744 374.208 771.712 347.776 771.712zM430.464 696.64c-11.84 0-21.44-9.536-21.44-21.376 0-11.904 9.6-21.504 21.44-21.504s21.44 9.6 21.44 21.504C451.968 687.04 442.304 696.64 430.464 696.64z"
										fill="#333333" p-id="8944"></path>
								</svg>
							</div>
						</a>
						<a href="#" class="social-icon">
							<div class="iconFace">
								<!-- 支付宝 -->
								<svg t="1716042638269" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="7835" width="20" height="20">
									<path
										d="M807.893592 80.449263 220.596675 80.449263c-76.004021 0-138.188292 62.185294-138.188292 138.188292l0 585.568553c0 76.001975 62.184271 138.186246 138.188292 138.186246L807.893592 942.392354c76.001975 0 138.184199-62.184271 138.184199-138.186246l0-5.180999c0 0-224.554312-93.278453-338.559832-148.555407-76.002998 93.278453-174.460404 150.279678-276.373515 150.279678-171.006745 0-229.736335-150.279678-148.552338-248.735038 17.273409-20.730137 48.365544-41.459251 95.005794-53.547567 74.27361-18.999726 191.735859 10.360975 300.559357 46.636157 18.999726-36.275181 36.270065-76.001975 48.363498-119.187543L287.960922 425.915389l0-34.544771 174.463474 0 0-58.729589L251.689834 332.641029l0-34.547841L462.42542 298.093189l0-88.095407c0 0 0-15.544021 15.542998-15.544021l84.640726 0 0 101.913111L771.617387 296.366871l0 34.545794L562.609143 330.912665l0 60.46 171.005722 0c-17.274432 65.637929-41.453111 127.824247-72.545246 181.368744 51.819203 18.998703 98.455359 36.275181 133.005246 48.367591 124.366496 41.454134 152.002926 44.909839 152.002926 44.909839l0-1.725294L946.077791 218.637556C946.077791 142.634558 883.89659 80.449263 807.893592 80.449263z"
										fill="#333333" p-id="7836"></path>
									<path
										d="M293.142945 548.558637c-22.452361 1.730411-62.185294 12.091386-84.637656 31.091112-67.36834 58.735729-27.6395 164.100452 107.095133 164.100452 77.731362 0 155.460678-50.095955 219.37229-129.550565C446.876282 571.015092 372.603695 539.921933 293.142945 548.558637z"
										fill="#333333" p-id="7837"></path>
								</svg>
							</div>
						</a>
					</div>
				</div>
				<!-- 注册内容 -->
				<div class="sign-up-form FORM">
					<h2 class="title" @click="register()">注册</h2>
					<div class="input-field">
						<div class="iconFace">
							<img width="18" height="18" src="../../assets/img/user.svg" alt="">
						</div>
						<input v-model="re_username" type="text" autocomplete="current-username" placeholder="用户名" />
					</div>
					<div class="input-field">
						<div class="iconFace">
							<img width="18" height="18" src="../../assets/img/lock.svg" alt="">
						</div>
						<input v-model="re_password" type="password" autocomplete="current-password" placeholder="密码" />
					</div>
					<div class="input-field sp">
						<div class="iconFace">
							<img width="30" height="30" src="../../assets/icons/avatar.png" alt="">
						</div>
						<el-upload class="avatar-uploader" action="http://localhost:3310/user/upload"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img style="width: 178px; height: 178px" v-if="avatar" :src="avatar" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<div class="input-field sp2">
						<div class="iconFace">
							<img width="25" height="25" src="../../assets/icons/gender.png" alt="">
						</div>
						<div class="right">
							<el-radio v-model="radio1" label="0" border>男</el-radio>
							<el-radio v-model="radio1" label="1" border>女</el-radio>
						</div>
					</div>
					<div class="input-field sp3">
						<div class="iconFace">
							<img width="25" height="25" src="../../assets/icons/time.png" alt="">
						</div>
						<div class="block">
							<el-date-picker v-model="birth"  type="date" placeholder="选择生日">
							</el-date-picker>
						</div>
					</div>
					<div class="input-field sp4">
						<div class="iconFace">
							<img width="25" height="25" src="../../assets/icons/phone.png" alt="">
						</div>
						<input v-model="phone" type="tel" maxlength="11" placeholder="手机号" />
					</div>
					<input @click="register" type="submit" class="btn" value="立即注册" />
					<p class="social-text">通过其他方式</p>
					<div class="social-media">
						<a href="#" class="social-icon">
							<div class="iconFace">
								<!-- qq -->
								<svg t="1716042528254" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="5684" width="20" height="20">
									<path
										d="M794.5 721.9c-9.7 56.1-35.7 106.6-73.3 146.4 40.8 18.9 77.6 47.7 77.6 90.3H225c0-42.6 36.9-71.3 77.6-90.3-37.6-39.8-63.7-90.3-73.3-146.4-43.1 63.2-106.8 94.5-106.8 94.5 0-164 102.5-386 102.5-386v-81.2c0-157.1 128.5-284.4 286.9-284.4 158.5 0 286.9 127.3 286.9 284.4v81.2s102.4 222 102.4 386c0.1 0-63.7-31.3-106.7-94.5z m0 0"
										p-id="5685" fill="#333333"></path>
								</svg>
							</div>
						</a>
						<a href="#" class="social-icon">
							<div class="iconFace">
								<!-- 微信 -->
								<svg t="1716042586508" class="icon" viewBox="0 0 1251 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6756" width="20" height="20">
									<path
										d="M874.116741 320.739556c8.229926 0 16.459852 0.303407 24.576 0.720592C864.635259 139.264 677.660444 0 452.077037 0 202.448593 0 0 170.704593 0 381.345185c0 114.763852 60.871111 218.263704 156.254815 288.161185a30.568296 30.568296 0 0 1 12.667259 24.917334c0 3.413333-0.682667 6.523259-1.517037 9.784889-7.698963 28.709926-19.835259 74.714074-20.404148 76.837926-0.948148 3.678815-2.351407 7.35763-2.351408 11.188148 0 8.343704 6.674963 15.284148 15.056593 15.284148a17.483852 17.483852 0 0 0 8.685037-2.844445l98.986667-57.874963a46.648889 46.648889 0 0 1 24.007111-7.092148c4.437333 0 8.912593 0.720593 13.274074 2.010074a529.294222 529.294222 0 0 0 172.411259 20.366223 294.305185 294.305185 0 0 1-15.246222-93.411556c0-192.246519 184.585481-347.932444 412.254815-347.932444zM602.832593 198.352593c33.261037 0 60.302222 27.306667 60.302222 60.984888 0 33.716148-26.927407 61.022815-60.302222 61.022815-33.223111 0-60.302222-27.306667-60.302223-61.022815 0-33.678222 27.079111-60.984889 60.302223-60.984888zM301.435259 320.32237c-33.223111 0-60.302222-27.306667-60.302222-61.022814 0-33.678222 26.927407-60.984889 60.302222-60.984889 33.374815 0 60.302222 27.306667 60.302222 60.984889 0 33.716148-27.079111 61.022815-60.302222 61.022814z"
										p-id="6757" fill="#333333"></path>
									<path
										d="M1121.46963 909.198222C1200.848593 850.906074 1251.555556 764.814222 1251.555556 669.013333c0-175.521185-168.656593-317.781333-376.832-317.781333-208.023704 0-376.794074 142.222222-376.794075 317.781333 0 175.521185 168.656593 317.743407 376.794075 317.743408 43.008 0 84.612741-6.219852 123.031703-17.408a36.560593 36.560593 0 0 1 10.998519-1.668741c7.281778 0 13.842963 2.275556 19.986963 5.802667l82.488889 48.128a13.918815 13.918815 0 0 0 7.281777 2.389333 12.47763 12.47763 0 0 0 12.553482-12.743111c0-3.109926-1.251556-6.219852-1.934222-9.329778-0.417185-1.706667-10.619259-40.049778-17.066667-64.094815a32.161185 32.161185 0 0 1-1.251556-8.116148 26.244741 26.244741 0 0 1 10.61926-20.48z m-372.09126-290.891852c-27.799704 0-50.289778-22.755556-50.289777-50.82074 0-27.989333 22.490074-50.820741 50.289777-50.820741 27.761778 0 50.251852 22.831407 50.251852 50.820741 0 28.065185-22.603852 50.820741-50.251852 50.82074z m251.145482 0c-27.761778 0-50.251852-22.755556-50.251852-50.82074 0-27.989333 22.490074-50.820741 50.251852-50.820741 27.799704 0 50.251852 22.831407 50.251852 50.820741a50.744889 50.744889 0 0 1-50.251852 50.82074z"
										p-id="6758" fill="#333333"></path>
								</svg>
							</div>
						</a>
						<a href="#" class="social-icon">
							<div class="iconFace">
								<!-- 微博 -->
								<svg t="1716042678693" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="8940" width="20" height="20">
									<path
										d="M845.248 466.048c-1.344 0-2.688-0.064-4.032-0.448-9.536-2.112-15.616-11.648-13.504-21.312 11.2-49.728 6.592-84.992-13.568-104.768-33.344-32.768-100.928-16.96-101.568-16.768-9.664 2.368-19.328-3.584-21.568-13.12-2.304-9.6 3.456-19.2 13.12-21.568 3.584-0.896 87.424-20.736 134.912 25.856 29.568 29.056 37.504 75.456 23.424 138.112C860.736 460.416 853.376 466.048 845.248 466.048z"
										fill="#333333" p-id="8941"></path>
									<path
										d="M961.536 514.88c-1.344 0-2.56-0.128-3.968-0.32-12.928-2.176-21.696-14.464-19.584-27.328 20.032-121.088 3.84-205.888-48.192-252.224-80.256-71.296-223.616-30.784-225.088-30.4-12.544 3.648-25.728-3.648-29.44-16.192C631.68 175.872 638.912 162.688 651.584 158.912c6.784-2.048 169.6-48.32 269.76 40.384 65.216 57.856 86.656 157.312 63.68 295.616C983.04 506.624 972.992 514.88 961.536 514.88z"
										fill="#333333" p-id="8942"></path>
									<path
										d="M744.512 514.88c0 0 98.688-234.816-230.4-117.824 10.432-123.392-43.136-198.272-203.776-107.072 0 0-521.92 353.856-141.248 579.904 0 0 478.72 197.76 695.936-169.536C908.096 568.064 780.224 512.896 744.512 514.88zM435.648 869.44c-158.336 18.112-296.512-52.288-308.544-157.44S233.6 506.944 391.936 488.832c158.4-18.24 296.576 52.224 308.608 157.312C712.64 751.232 593.984 851.264 435.648 869.44z"
										fill="#333333" p-id="8943"></path>
									<path
										d="M550.144 680.384C543.616 608.448 469.12 556.352 383.808 564.096c-85.312 7.744-149.184 72.256-142.656 144.256 6.528 72 80.96 124.096 166.272 116.288C492.8 816.96 556.608 752.32 550.144 680.384zM347.776 771.712c-26.368 0-47.808-19.968-47.808-44.544 0-24.576 21.44-44.608 47.808-44.608 26.496 0 47.872 20.032 47.872 44.608C395.648 751.744 374.208 771.712 347.776 771.712zM430.464 696.64c-11.84 0-21.44-9.536-21.44-21.376 0-11.904 9.6-21.504 21.44-21.504s21.44 9.6 21.44 21.504C451.968 687.04 442.304 696.64 430.464 696.64z"
										fill="#333333" p-id="8944"></path>
								</svg>
							</div>
						</a>
						<a href="#" class="social-icon">
							<div class="iconFace">
								<!-- 支付宝 -->
								<svg t="1716042638269" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="7835" width="20" height="20">
									<path
										d="M807.893592 80.449263 220.596675 80.449263c-76.004021 0-138.188292 62.185294-138.188292 138.188292l0 585.568553c0 76.001975 62.184271 138.186246 138.188292 138.186246L807.893592 942.392354c76.001975 0 138.184199-62.184271 138.184199-138.186246l0-5.180999c0 0-224.554312-93.278453-338.559832-148.555407-76.002998 93.278453-174.460404 150.279678-276.373515 150.279678-171.006745 0-229.736335-150.279678-148.552338-248.735038 17.273409-20.730137 48.365544-41.459251 95.005794-53.547567 74.27361-18.999726 191.735859 10.360975 300.559357 46.636157 18.999726-36.275181 36.270065-76.001975 48.363498-119.187543L287.960922 425.915389l0-34.544771 174.463474 0 0-58.729589L251.689834 332.641029l0-34.547841L462.42542 298.093189l0-88.095407c0 0 0-15.544021 15.542998-15.544021l84.640726 0 0 101.913111L771.617387 296.366871l0 34.545794L562.609143 330.912665l0 60.46 171.005722 0c-17.274432 65.637929-41.453111 127.824247-72.545246 181.368744 51.819203 18.998703 98.455359 36.275181 133.005246 48.367591 124.366496 41.454134 152.002926 44.909839 152.002926 44.909839l0-1.725294L946.077791 218.637556C946.077791 142.634558 883.89659 80.449263 807.893592 80.449263z"
										fill="#333333" p-id="7836"></path>
									<path
										d="M293.142945 548.558637c-22.452361 1.730411-62.185294 12.091386-84.637656 31.091112-67.36834 58.735729-27.6395 164.100452 107.095133 164.100452 77.731362 0 155.460678-50.095955 219.37229-129.550565C446.876282 571.015092 372.603695 539.921933 293.142945 548.558637z"
										fill="#333333" p-id="7837"></path>
								</svg>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="panels-container">
			<!-- 去注册 -->
			<div class="panel left-panel">
				<div class="content">
					<h3>加入我们</h3>
					<p>如果你也热爱最终幻想,那么欢迎你,我的朋友</p>
					<button @click="clearRegisterData" class="btn transparent" id="sign-up-btn">去注册</button>
				</div>
				<img src="../../assets/img/log.svg" class="image" alt="" />
			</div>
			<!-- 去登陆 -->
			<div class="panel right-panel">
				<div class="content">
					<h3>已有帐号？</h3>
					<p>立即登录已有帐号，享受独家权益。</p>
					<button @click="clearLoginData" class="btn transparent" id="sign-in-btn">去登录</button>
				</div>
				<img src="../../assets/img/register.svg" class="image" alt="" />
			</div>
		</div>
	</div>
	<!-- <div class="LoginBox">

	</div> -->
</template>


<style scoped lang="scss">
@import url("../../assets/css/style.css");

.sp {
	height: 178px;

	.avatar-uploader {
		display: flex;
		justify-content: center;
		align-content: center;

		.el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;

			.el-upload:hover {
				border-color: #409EFF;
			}
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 1178px;
			display: block;
		}
	}
}

.sp2 {
	background-color: #fff;

	.right {
		display: flex;
		align-items: center;
	}
}
.sp3 {
	.block {
		line-height: 55px;
		display: flex;
		gap: 5px;
	}
}

.el-loading-spinner {
    .circular {
        width: 42px;
        height: 42px;
        animation: loading-rotate 2s linear infinite;
        display: none;
    }
}
.el-loading-spinner{
    /* 图片替换为你自定义的即可 */
    background: url('@/assets/gif/loading.gif') no-repeat;
    background-size: 48px 48px;
    width: 100%;
    height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
}
</style>
